<template>
	<div class="h60">
		<div class="w100 bgcfff h5 da p1" style="border: #e6e6e6 1px solid;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
			<!-- <el-upload
				class="avatar-uploader"
				action="https://jsonplaceholder.typicode.com/posts/"
				:show-file-list="false"
				:on-success="handleAvatarSuccess"
				:before-upload="beforeAvatarUpload"
			>
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload> -->
			<el-image
				style="width: 6rem; height: 6rem;border-radius: 50%;"
				:src="url + getBumenInfo.logo"
				:perview-src-list="(url + getBumenInfo.logo).split(',')"
				fit="fill"
			></el-image>
			<div class="plr1">
				<div class="da">
					<div class="fwb">{{ getBumenInfo.dname }}/{{ getBumenInfo.name }}</div>
					<div class="mr2">
						<el-tag>{{ getBumenInfo.dname }}</el-tag>
					</div>
				</div>
				<div class="da pt05">
					<div class="fz05 cb8">邮箱 : {{ getBumenInfo.email }}</div>
					<div class="ml05 fz05 cb8">电话 : {{ getBumenInfo.mobile }}</div>
				</div>
			</div>
		</div>
		<div class="w100 bgcfff mt05 p1 h50" style="border: #e6e6e6 1px solid;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
			<el-form :model="queryParams" :rules="rulesForm" ref="form" label-width="100px" class="ruleForm">
				<el-row :gutter="20">
					<el-col :span="21">
						<el-form-item label="选择权限" prop="name">
							<el-select v-model="queryParams.jiaose" style="width: 12rem;" size="small" placeholder="请选择" @change="changeJiaose">
								<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="13">
						<el-form-item label="活动名称" prop="input">
							<el-input v-model="form.input" style="width: 12rem;" size="small" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="3">
						<div v-if="show == 0 ? false : true" @click="addMember" style="font-size: 0.9rem; color: #2F6BBB;">
							<i class="el-icon-plus plr02"></i>
							添加成员
						</div>
					</el-col>
				</el-row>
			</el-form>
			<el-table
				:data="listPageArr"
				border
				v-loading="loading"
				height="90%"
				style="width: 100%;"
				:header-cell-style="{ background: '#2F6BBB', color: '#FFFFFF', border: '#2F6BBB' }"
				:cell-style="{ border: '#ffffff' }"
			>
				<el-table-column prop="email" label="邮箱" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="jiaose" label="成员角色" align="center"></el-table-column>
				<el-table-column prop="username" label="姓名" align="center"></el-table-column>
				<el-table-column prop="create_time" label="加入时间" align="center">
					<template slot-scope="scope">
						<span>{{ formatDate(scope.row.create_time) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="mobile" label="联系电话" align="center"></el-table-column>
				<el-table-column fixed="right" align="center" width="160" label="操作" :key="Math.random()" v-if="showRule">
					<template slot-scope="scope">
						<div style="display: flex; align-items: center; justify-content: center;">
							<div class="c2f cp" @click="handleClick(scope.row)">权限修改</div>
							<div class="c2f cp" style="margin-left: 10px;" @click="delClick(scope.row)">删除</div>
						</div>
					</template>
					<!-- 	<template slot-scope="scope">
					</template> -->
				</el-table-column>
			</el-table>
			<div class="tar mt05">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="10"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="count"
				></el-pagination>
			</div>
		</div>
		<el-dialog title="添加成员" :visible.sync="addMemberDialog" width="42%" :before-close="handleClose">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="12">
						<el-form-item label="成员姓名" prop="username"><el-input style="width: 18rem;" v-model="ruleForm.username"></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="权限设置" prop="jiaose">
							<autocomplete :inputValue="inputValues" :allInfos="allInfosRules" @dimDepartment="dimRules"></autocomplete>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-radio-group v-model="ruleForm.sex">
								<el-radio label="男"></el-radio>
								<el-radio label="女"></el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="mobile"><el-input style="width: 18rem;" v-model="ruleForm.mobile"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="所属部门" prop="b_id">
							<autocomplete :inputValue="inputValue" :allInfos="allInfos" @dimDepartment="dimDepartment"></autocomplete>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="密码" prop="password"><el-input style="width: 18rem;" v-model="ruleForm.password"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="12">
						<el-form-item label="所属公司" prop="company"><el-input style="width: 18rem;" v-model="ruleForm.company"></el-input></el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item label="联系邮箱" prop="email"><el-input style="width: 18rem;" v-model="ruleForm.email"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12" :offset="16">
						<el-form-item>
							<el-button type="primary" :loading="addLoading" @click="submitForm('ruleForm')">
								<span v-if="!addLoading">添加</span>
								<span v-else>添加中...</span>
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>

		<!-- 修改权限 -->
		<el-dialog title="修改权限" width="40%" :visible.sync="dialogFormVisible">
			<el-form :model="formRules">
				<el-form-item label="权限人员" label-width="120px">
					<el-select style="width: 18rem;" size="small" v-model="formRules.id" placeholder="请选择权限人员">
						<el-option v-for="item in optionsName" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="affirmRules" :loading="loadingRules">
					<span v-if="!loadingRules">确 认</span>
					<span v-else>确认中...</span>
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { bumenInfo, bumenUserPage, userDepartment, addUser, userRule, userGroupList, editUserRules, userRules, userRuleDel } from '@/api/user.js';
import { getItem } from '@/utils/storage.js';
// import { approval } from '@/api/drill.js';
import autocomplete from '@/components/autocomplete.vue';
export default {
	name: '',
	components: {
		autocomplete
	},
	data() {
		//电话
		const mobileData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入手机号'));
			} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
				callback(new Error('请正确的手机号格式'));
			} else {
				callback();
			}
		};
		//邮箱
		const emailData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入邮箱'));
			} else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) {
				callback(new Error('请正确的邮箱格式'));
			} else {
				callback();
			}
		};
		return {
			//列表加载状态
			loading: false,
			//添加状态
			addLoading: false,
			loadingRules: false,
			value: '',
			imageUrl: '',
			input: null,
			key: 1,
			//添加成员弹窗
			addMemberDialog: false,
			//修改权限
			dialogFormVisible: false,
			//表单
			ruleForm: {
				sex: null,
				b_id: null,
				jiaose: null,
				token: getItem('token')
			},
			//权限
			formRules: {
				id: null,
				uid: null,
				token: getItem('token')
			},
			inputValues: '',
			inputValue: '',
			//表单校验
			rules: {
				// username: [{ required: true, message: '请输入成员姓名', trigger: 'blur' }],
				// jiaose: [{ required: true, message: '请选择权限', trigger: 'change' }],
				// sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
				// mobile: [{ required: true, validator: mobileData, trigger: 'blur' }],
				// company: [{ required: true, message: '请输入公司姓名', trigger: 'blur' }],
				// password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				// email: [{ required: true, validator: emailData, trigger: 'blur' }],
				// b_id: [{ required: true, message: '请选择部门', trigger: 'change' }]
			},
			options: [],
			form: {},
			rulesForm: {},
			getBumenInfo: {},
			queryParams: {
				pageSize: 10,
				page: 1,
				jiaose: '',
				id: '',
				token: getItem('token')
			},
			//根据部门控制添加按钮
			show: 0,
			listPageArr: [],
			count: 0,
			//部门
			allInfos: [],
			//权限
			allInfosRules: [],
			showRule: false,
			optionsName: [] //权限人员
		};
	},
	watch: {
		$route: {
			handler() {
				this.queryParams.id = this.$route.query.id;
				//监听参数变化时去请求
				this.getBumenInfos(this.$route.query.id);
				this.listPage();
				//深度监听，同时也可监听到query参数变化
			},
			deep: true
		}
	},
	created() {
		//初始化时携参数请求
		this.queryParams.id = this.$route.query.id;
		this.getBumenInfos(this.$route.query.id);
		this.listPage();
		//获取权限列表
		this.userRule();
		//按钮权限
		this.getUserRule(3);
		userGroupList().then(res => {
			this.options = res.data;
		});
	},
	methods: {
		getUserRule(val) {
			//按钮权限
			userRule(val).then(res => {
				if (res.code == 1001) {
					if (val == 3) {
						this.showRule = true;
					}
					if (val == 4) {
						this.show = 1;
					}
				}
			});
		},
		getBumenInfos(val) {
			let data = {
				token: getItem('token'),
				id: val
			};
			bumenInfo(data).then(res => {
				this.getBumenInfo = res.data;
			});
		},
		listPage() {
			this.loading = true;
			bumenUserPage(this.queryParams).then(res => {
				this.loading = false;
				this.listPageArr = res.data.arr;
				this.count = res.data.count;
				if (res.data.hid == 1) {
					this.getUserRule(4);
				}
			});
		},
		//选择角色
		changeJiaose() {
			// console.log(this.queryParams);
			this.listPage();
		},
		//用户部门
		userDepartments() {
			let data = {
				token: getItem('token'),
				id: this.$route.query.id
			};
			userDepartment(data).then(res => {
				this.addMemberDialog = true;
				this.allInfos = res.data;
			});
		},
		//权限下拉模糊
		userRule() {
			let data = {
				token: getItem('token')
			};
			userRules(data).then(res => {
				this.allInfosRules = res.data;
			});
		},
		//部门权限
		dimDepartment(val) {
			this.ruleForm.b_id = val;
		},
		//权限
		dimRules(val) {
			this.ruleForm.jiaose = val;
		},
		addMember() {
			//获取所有部门
			this.userDepartments();
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.listPage();
		},
		handleCurrentChange(val) {
			this.queryParams.page = val;
			this.listPage();
		},
		handleClick(row) {
			let data = {
				token: getItem('token')
			};
			userRules(data).then(res => {
				this.optionsName = res.data;
				this.formRules.uid = row.id;
				this.dialogFormVisible = true;
			});
		},
		delClick(val) {
			let data = {
				del_user: val.id
			};
			userRuleDel(data).then(res => {
				this.msgSuccess(res.msg);
				this.listPage();
			});
		},
		affirmRules() {
			this.loadingRules = true;
			editUserRules(this.formRules).then(res => {
				if (res.code == 1001) {
					this.loadingRules = false;
					this.msgSuccess(res.msg);
					this.dialogFormVisible = false;
					this.listPage();
					this.formRules.id = null;
					this.formRules.uid = null;
				}
			});
		},
		handleAvatarSuccess(res, file) {
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		//确认添加
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.addLoading = true;
					addUser(this.ruleForm).then(res => {
						if (res.code == 1001) {
							this.addLoading = false;
							this.addMemberDialog = false;
							this.msgSuccess(res.msg);
							this.listPage();
							this.ruleForm = {};
							// this.ruleForm.b_id = null;
						}
					});
				} else {
					return false;
				}
			});
		},
		//关闭弹窗
		handleClose() {
			this.addMemberDialog = false;
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 0.4ren;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 1.5rem;
	color: #8c939d;
	width: 5rem;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
}
.avatar {
	width: 5rem;
	height: 5rem;
	display: block;
}
.el-tag {
	background-color: #00a0e9;
	color: #ffffff;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
/deep/.el-dialog__header {
	background-color: #2f6bbb;
	.el-dialog__title {
		color: #ffffff;
	}
	.el-icon-close {
		color: #ffffff;
	}
}
.el-button {
	width: 7rem !important;
}
.ruleForm .el-row {
	height: 3rem;
	line-height: 3rem;
	.el-form-item {
		margin-bottom: 0rem;
	}
}
</style>
